<title>Where are you camping?</title>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-16545993-4']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<style>
body, input, option, button { font-family: helvetica, arial; font-size: 13px; }
.bubble { width: 300px; }
.bubble input { font-size: 16px; width: 100%; }
.bubble .action { width: 100%; margin-top: 13px; }
.bubble .action button { margin-left: 0.75em; }
.bubble .action button.delete { margin: 0; }
.bubble .action .save { float: right; }
.bubble .action .link { margin-left: 0.75em; }
#panel, #map, #line1, #line2, #line3, #list { position: absolute; }
h1 { font-weight: normal; font-size: 20px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", helvetica, arial; font-weight: 300; margin-top: 8px; padding-top: 0; color: #000; }
#panel { top: 0; left: 0; width: 240px; height: 120px; padding: 4px 8px; color: #888; }
.instructions { margin: 6px 0; }
.search { margin: 6px 0; width: 220px; }
#map { top: 0; left: 240px; right: 0; bottom: 0; }
#map .label { position: absolute; z-index: 1000000; font-size: 11px;
max-width: 10em; text-align: center;
text-shadow: #fff 1px 0 4px, #fff -1px 0 4px, #fff 0 1px 4px, #fff 0 -1px 4px,
             #fff 1px 0 4px, #fff -1px 0 4px, #fff 0 1px 4px, #fff 0 -1px 4px; }
#map .label.highlighted, #list .title.highlighted {
text-shadow: #ff0 1px 0 4px, #ff0 -1px 0 4px, #ff0 0 1px 4px, #ff0 0 -1px 4px,
             #ff0 1px 0 4px, #ff0 -1px 0 4px, #ff0 0 1px 4px, #ff0 0 -1px 4px; }
#list li .expand { font-size: 9px; color: #888;
    position: absolute; right: 4px; cursor: pointer; }
#line1 { top: 0; left: 240px; width: 1px; bottom: 0; }
#line2 { top: 0; left: 240px; width: 2px; bottom: 0; }
#line3 { top: 0; left: 240px; width: 3px; bottom: 0; }
#line4 { top: 0; left: 240px; width: 4px; bottom: 0; }
#line1, #line2, #line3, #line4 { background-color: #000; opacity: 0.15; }
#list { top: 120px; left: 0; width: 240px; bottom: 0; padding: 0; margin: 0; }
#list { border-top: 1px solid #ccc; overflow: auto; }
#list li { list-style-type: none; padding: 4px 12px 4px 8px; cursor: default; }
#list li.selected { background: #cdf; }
#list ul.history { font-size: 11px; padding: 0; margin: 0; color: #888; }
#list ul.history li { list-style-type: none; padding: 2px 12px; }
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="util.js"></script>
<script src="base_map.js"></script>
<script src="map_editor.js"></script>
<script src="json2-min.js"></script>
<script src="store.js"></script>
<div id="panel">
<h1>Where are you camping?</h1>
<div class="instructions">Click on the map to add a point.</div>
</div>
<ul id="list"></ul>
<div id="map"></div>
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
<div id="line4"></div>
<script>
var map = document.getElementById('map');
var panel = document.getElementById('panel');
var list = document.getElementById('list');
var store = new Store('http://whereareyoucamping0.appspot.com');
var editor = new MapEditor(map, panel, list, store, BASE_MAP, 0, 0, 15);
</script>
